.main-header {
  height: 60px;
  border-bottom: 1px solid #31323a;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-search {
  height: 40px;
  /* outline: 1px solid; */
  display: flex;
  align-items: center;
  width: 476px;
  background: #292b35;
  border-radius: 5px;
}
.header-search .iconfont {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 10px;
}
.header-search input {
  flex: 1 0 auto;
  background: transparent;
  outline: none;
  border: none;
  font-size: 14px;
  color: #fff;
  /* 光标颜色 */
  caret-color: #fe2c55;
}
.header-search button {
  font-size: 16px;
  width: 64px;
  height: 40px;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

.header-function {
  height: 40px;
  background: blue;
  width: 500px;
}

/* 功能区域 */
.main-function {
  display: flex;
  align-items: center;
}

.main-function a:hover {
  color: #fff;
  font-weight: bold;
}

.main-function-sub {
  position: absolute;
  /* outline: 1px solid; */
  line-height: normal;
  background: #252632;

  border-radius: 5px;
  display: none;
  /* 让文字不要换行 */
  word-break: keep-all;
  top: 60px;
  left: 50%;
  /* 向左移动自身宽度的一半 */
  transform: translateX(-50%);
}
.main-function-sub a {
  display: block;
  margin: 16px;
}
.main-function-item:hover .main-function-sub {
  display: block;
}
.main-function-item {
  margin: 0 12px;
  font-size: 14px;
  line-height: 60px;
  position: relative;
}

.main-function-pub {
  width: 108px;
  height: 38px;
  /* outline: 1px solid; */
  line-height: 38px;
  display: flex;
  justify-content: center;
}

.main-function-pub a {
  width: 108px;
  height: 38px;
  border: 2px solid #fff;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff;
  box-shadow: -3px 0 0 #00faf0, 3px 0 0 #fe2c55;
  flex: 0 0 auto;
}
.main-function-pub a:hover {
  box-shadow: none;
  /* 鼠标移动到a元素上时，对a元素应用动画 */
  animation: widthChange 0.3s;
}
.main-function-pub .iconfont {
  margin-right: 5px;
}

@keyframes widthChange {
  0% {
    width: 108px;
  }
  50% {
    width: 116px;
  }
  100% {
    width: 108px;
  }
}

.main-function-login {
  outline: none;
  border: none;
  background: #fe2c55;
  color: #fff;
  width: 108px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  border-radius: 5px;
}
.main-function-login:hover {
  background: #f22a51;
}
